前期提要
https://ithelp.ithome.com.tw/articles/10312100
如有錯誤或更好的做法，請不吝指教
練習完之後覺得js真的很有趣呀，希望未來還能保有相同的熱情

函數return 字串樣板應用

// input 輸入
addNumberAndString(5,10,30)
addNumberAndString(4,20,22)
addNumberAndString(9,100,44)

// output 輸出
"第一加第二個參數加總為 15，第三個參數為 30"
"第一加第二個參數加總為 24，第三個參數為 22"
"第一加第二個參數加總為 109，第三個參數為 44"

function addNumAndString(num1, num2, num3) {
  //   const addTwo = num1 + num2;
  return `第一加第二個參數加總為 ${addTwo}，第三個參數為 ${num3}`;
} //不可 ${num1} + ${num2} 會變成字串相加5 + 10，只能 ${num1+num2}

取到小數第幾位 Math.round or Number(num.toFixed(2))

// input 輸入
rounding(3.9988)
rounding(3984.222)
rounding(77.777)

// output 輸出
4.00
3984.22
77.78

function rounding(num) {
  return Math.round(num * 100) / 100;
}
// function rounding(num){
//   return Number(num.toFixed(2))
// }

字串轉數字 parseNumber

// input 輸入
parseNumber("2.33")
parseNumber("Hello!!")
parseNumber("30000")

// output 輸出
2.33
NaN
30000

function parseNumber(str){
  return Number(str)
}

字串大小轉小寫 str.toLowerCase()

// input 輸入
lowerCase("FOKFF@gmail.com")
lowerCase("gonSakpm@gmail.com")

// output 輸出
"fokff@gmail.com"
"gonsakpm@gmail.com"

function lowerCase(str) {
  return str.toLowerCase; //return str.toLowerCase(); 沒()不會執行
}

console.log(lowerCase("FOKFF@gmail.com"));
console.log(lowerCase("gonSakpm@gmail.com"));
// output 輸出

字串切割為陣列 str.split(",")

// input 輸入
splitString("black,red,white")
splitString("coffee,tea")

// output 輸出
// ["black","red","white"]
// ["coffee","tea"]

function splitString(str) {
  return str.split(); //return str.split(","); 依照split()內的 , 為斷點分割成多個陣列中的元素
}

切割字串 str.slice()

// input 輸入
getArea("高雄市前鎮區一心二路33號");
getArea("高雄市新興區新興路66號");

// output 輸出
"前鎮區"
"新興區"

//以下3擇一
function getArea(str) {

  
  // str.substr(a, b) 從第a+1個字開始切，向後切出b個字
  const substrResult = str.substr(3, 3);
  // str.substring(a, b) 從第a+1個字開始切，切到第b個字
  const substringResult = str.substring(3, 6);
  // str.slice(a, b) 同str.substring
  const strSlice = str.slice(3, 6);
}

布林反轉

// input 輸入
booleanToggle(true)
booleanToggle(false)
// output 輸出
false
true

//(可加多個!)
function booleanToggle(boolean) {
  return !boolean;
}

型別判斷

// input 輸入
checkType(3.33)
checkType("Hello")
checkType(true)
checkType([1,2,3])
// output 輸出
"number"
"string"
"boolean"
"object"

function checkType(a) {
  return typeof a; //typeof(a)也可 僅一個變數可不加()，兩個以上必須加
}

消費金額是否大於 200(萬)，且符合會員條件

// input 輸入
checkVIP(300,true)
checkVIP(0,true)
checkVIP(30000,false)
checkVIP(888,true)

// output 輸出
true
false
false
true

function checkVIP(num, boo) { //boo改成isVip較佳，布林值用isXX當變數名稱佳
  if ((num >= 200) & (boo == true)) {  //&改成&&較佳，使用&&若左側false則不執行右側運算，效能較好！
    return true;
  } else {
    return false;
  }
}

日幣計算機(1:0.32)

// input 輸入
TWDtoJPY(-1);
TWDtoJPY("hi~");
TWDtoJPY(2000);
TWDtoJPY(320);
// output 輸出
("...沒錢別來亂");
("當我看不懂字串？？");
("你換到的日幣有：6250");
("你換到的日幣有：1000");

function TWDtoJPY(num) {
  if (num <= 0) {
    return "...沒錢別來亂";
  } else if (typeof num == "string") {   //"string" 不可寫成string 須加上字串的雙引號
    return "當我看不懂字串？？";
  } else {
     console.log(`你換到的日幣有${num / 0.32}`);
  }
}

BMI 計算機

// input 輸入 
// BMI(身高,體重)

// output 輸出
"正常"
"重度肥胖"
"中度肥胖"
"輕度肥胖"
"過重"
"過輕"

function BMI(height, weight) {
  let h = height / 100;
  result = weight / (h * h);
  if (result < 18.5) {
    return "過輕";
  } else if (18.5 <= result < 24) { //應該成 18.5 <= result && result < 24，下方各處同理
  //否則以下各種都會符合 18.5 <= result 全部回傳"正常" 而 < 24 條件會失效
    return "正常";
  } else if (24 <= result < 27) {
    return "過重";
  } else if (27 <= result < 30) {
    return "輕度肥胖";
  } else if (30 <= result < 35) {
    return "中度肥胖";
  } else if (result >= 35) {
    return "重度肥胖";
  } else {
    return "輸入資料可能有誤";
  }
}

進階題 字串切割+if

如果第一個數字是質數，請將第二、三個數字加總
如果第一個數字是偶數，請將第二、三個數字相減
如果第一個數字不是質數也不是偶數，請將第二、三個數字相乘
// input 輸入
sum("13,20,10")
sum("10,2,3")
sum("9,5,7")
// output 輸出
30
-1
35

function isPrime(num) {
  if (num <= 1) {
    return "無法判別";
  } else if (num > 100) {
    return "抱歉，我只能計算100以內的數字";
  }
  //Math.sqrt(num)是開根號 找質數效能相對好的方法
  for (i = 2; i <= Math.sqrt(num); i++) {
    if (num % i == 0) {
      return "不是質數";
    }
  }
  return "是質數";
}

function sum(str) {
  const arr = str.split(",");
  //↑建立陣列並以「,」分割為各元素
  // console.log(arr);

  //↓將arr各字串元素的type轉為number
  const arrNum = arr.map(item => Number(item));
  if (isPrime(arrNum[0]) == "是質數") {
    console.log(arrNum[1] + arrNum[2]);
  } else if (arrNum[0] % 2 == 0) {
    console.log(arrNum[1] - arrNum[2]);
  } else {
    console.log(arrNum[1] * arrNum[2]);
  }
}

函式強制正整數相乘 Math.abs(x)

// input 輸入
multiply(2, 3);
multiply(1, 3, 5);
multiply(7, 7, 7, 7, 7);
multiply(5, 3, -2);
multiply(4);
// output 輸出
6;
15;
16807;
30;
4;

function multiply(...num) {  //(...num) 表示多個參數
  let result = 1;
  num.forEach((x) => {
  //Math.abs 是取絕對值
    result *= Math.abs(x);
  });
  console.log(result);
}

增減陣列內容 ary.splice(從第幾筆刪,刪幾筆,插入)

const ary = [];
// input 輸入
aryControl("增加","black")
aryControl("增加","red")
aryControl("增加","white")
aryControl("增加","blue")
aryControl("刪除指定筆數",3)
aryControl("刪除指定筆數",1)

// output 輸出
["black"]
["red","black"]
["white","red","black"]
["blue","white","red","black"]
["blue","white","black"]
["white","black"]

function aryControl(did, done) {
  if (did == "增加") {
    ary.unshift(done);
    console.log(ary);
  } else if (did == "刪除指定筆數") {
    ary.splice(done - 1, 1);
    // ary.splice(done - 1, 1, drum); 
    //從索引 done-1 的位置開始，刪除 1 個元素並插入「drum」(drum該欄可留白)
    console.log(ary);
  }
}

函式進階題

// input 輸入
obj()[2]()

// output 輸出
"hi"

//"" 可換成其他任意字元
function obj() {
  return [
    "",
    "",
    () => {
      console.log("hi");
    },
  ];
}

陣列反轉+格式轉為字串 ary.reverse().toString()

// input 輸入
aryToString([7,8,9])
aryToString(["black","white","red"])
aryToString([true,false,true])
// output 輸出
"9,8,7"
"red,white,black"
"true,false,true"

function aryToString(ary){
    let newAry = "";
    for(i= ary.length-1; i>= 0; i--){
        newAry += ary[i]+ "," 
    }
    console.log(newAry)
    console.log(typeof(newAry))
}

較佳解 //.toString() 可去除空格
function aryToString(ary){
  return ary.reverse().toString();
}

雙for迴圈

// input 輸入
multiplication(3)
multiplication(5)
// output 輸出 為字串格式
//  multiplication(3)
2x1=2
2x2=4
3x1=3
3x2=6
3x3=9

//  multiplication(5)
2x1=2
2x2=4
3x1=3
3x2=6
3x3=9
4x1=4
4x2=8
4x3=12
4x4=16
5x1=5
5x2=10
5x3=15
5x4=20
5x5=25

function multiplication(num){
    for(x=2; x <= num; x++){
        for(y=1; y <= x; y++){
            console.log(`${x}x${y}=${x*y}`)            
        }                
    }
}

正規表達式(限定位數&特定數字開頭)

參考資源
https://medium.com/itsems-frontend/whats-regex-dc08c8c30a87

是否為 10 碼
是不是 09 開頭

// input 輸入
checkPhoneNumber("0955717222")
checkPhoneNumber("331")
checkPhoneNumber("09839398")
checkPhoneNumber("0977121333")
// output 輸出
true
false
false
true

function checkPhoneNumber(num) {
  let myReg = /^09[0-9]{8}$/; //^09比對開頭09 [0-9]數字 {8}有8個 $比對結束位置
  console.log(myReg.test(num));
}

只有 6 碼
開頭必須是 B 開頭

// input 輸入
checkFiveWord("B12")
checkFiveWord("B89212")
checkFiveWord("B8987987")
checkFiveWord("B33212")
checkFiveWord("A33212")
// output 輸出
false
true
false
true
false

function checkFiveWord(str) {
  let myReg = /^B\d{5}$/; //^B開始是B  \d數字 {5}比對5次 $比對結束位置
  console.log(myReg.test(str));
}

至少一個大寫英文
至少一個小寫英文
至少一個數字
至少 8 碼以上

// input 輸入 
checkPassword("Abc87654")
checkPassword("Av3")
checkPassword("YYYYCC123")
checkPassword("BBBa930033")
checkPassword("Ka78328K")
// output 輸出
true
false
false
true
true

function checkPassword(pwd) {
  let myReg = /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=\w{8,})/;

  console.log(myReg.test(pwd));
}

// ?=表示比對是否符合後面的條件 //.*表示0次以上(含)字元 {8,}至少8字元 \w表示大小寫字母及數字

函式 return 物件

// input 輸入
console.log(a().hi);
console.log(a().sayYo);
console.log(a().cry);
// output 輸出
// ("hi");
// ("yo~");
// ("嗚嗚");

function a() {
  return {     //加return才能使函式內物件被呼叫
    hi: "hi",
    sayYo: "yo~",
    cry: "嗚嗚",
  };
}

  

陣列包函式

// input 輸入
b[0](3)
b[0](4)
// output 輸出
"你輸入的是3"
"你輸入的是4"

let b = [
  function (num) {
    console.log(`你輸入的是${num}`);
  },
];

物件包函式

// input 輸入
obj.a()
obj.b()
// output 輸出
"你執行的是 a 函式"
"你執行的是 b 函式"

let obj = {
  a: function () {
    console.log("你執行的是 a 函式");
  },
  b: function () {
    console.log("你執行的是 b 函式");
  },
};

arguments return function

// input 輸入
sum(4,5)
sum(4)(5)
sum(7,9)
sum(7)(9)
// output 輸出
9
9
16
16

function sum(a, b) {
  if (b !== undefined) {
    return a + b;
  } else {
    return function(c) { //(c) 可替換為(d)或任何其他參數
      return a + c;
    }
  }
}

是否含有某值

const numAry = [1,3,4,6,8];

// input 輸入
checkNum(3)
checkNum(9)
checkNum(83)
checkNum(6)

// output 輸出 obj 的結果
true
false
false
true

function checkNum(n){
    console.log(numAry.includes(n))
}

刪除值

const deletAry = [1,3,4,6,8];

// input 輸入
delNum(3)
delNum(9)
delNum(83)
delNum(6)

// output 輸出 obj 的結果
[1,4,6,8]
false
false
[1,4,8]

function delNum(n){
  const ans = deletAry.includes(n)    //檢查deletAry包含數字n
  if (ans){    //若包含
    let index = deletAry.indexOf(n)   //找出數字n的index值
    deletAry.splice(index, 1)         //切掉索引值開始計算的一個元素
    console.log(deletAry)
  }else{
    console.log(ans)
  }
}
  }
}

兩個陣列尋找相同數字

const a = [1,3,4,6,8];
const b = [3,6,12];
// input 輸入
checkSame(a,b)


// output 輸出 obj 的結果
[3,6]

function checkSame(arrA,arrB){
    let arr = [];
    arrA.forEach(x => { //x為[a]中各元素
        if( arrB.includes(x)){  //檢查arrB中是否有x元素
            arr.push(x)
        }
    });
    return arr
}

//better

function checkSame(arrA, arrB){
    const SAME = arrA.filter(x => arrB.includes(x))   //篩選出a中的x元素也有在b中的
    console.log(SAME)
}

陣列相乘 reduce((a, b) => a * b)

const doubleAry = [
    [1,2,3],
    [3,5,6],
    [2,2,2,2],
];

// input 輸入
callAry(doubleAry)

// output 
"第1個陣列相乘是6，第2個陣列相乘是90，第三個陣列相乘是16"

function callAry(ary) {
  let result = "";
  ary.forEach((i) => {
    result += `第${ary.indexOf(i) + 1}個陣列相乘是${
    i.reduce(
      (a, b) => a * b
    )}`;
    if (ary.indexOf(i) < ary.length - 1) {
      result += "，";
    } else if (ary.indexOf(i) == ary.length - 1) {
      result += "。";
    }
  });
  console.log(result);
}

陣列排序(正反) sort((a, b => a - b)) 小到大

const a = [1,3,4,6,8];
const b = [3,6,12];
// input 輸入
sortAry("從小到大",[8,3,1,7])
sortAry("從小到大",[99,22,11,33])
sortAry("從大到小",[7,2,33,4])


// output
[1,3,7,8]
[11,22,33,99]
[33,7,4,2]


function sortAry(sort, ary) {
  if (sort == "從小到大") {
    ary.sort((a, b) => a - b);
    console.log(ary);
  } else if (sort == "從大到小") {               
    ary.sort((a, b) => b - a);
    console.log(ary);
  }
}

array中依分數做排序 ary.sort

const scoreAry = [
    {
        name:"葉子",
        score:99
    },
    {
        name:"洧杰",
        score:60
    },
    {
        name:"卡斯伯",
        score:80
    }
];

// input 輸入
callAry("正序",scoreAry)
callAry("反序",scoreAry)

function callAry(order,ary) {
  if (order == "正序") {
    ary.sort((a, b) => a.score - b.score);
  } else if (order == "反序") {
    ary.sort((a, b) => b.score - a.score);
  }
  console.log(ary);
}

篩選資料 ary.filter

const scoreAry = [
    {
        name:"葉子",
        score:99
    },
    {
        name:"洧杰",
        score:60
    },
    {
        name:"卡斯伯",
        score:80
    }
];

// input 輸入
callAry2(80)
callAry2(99)
callAry2(100)
// output 

葉子卡斯伯分數有在80分以上
葉子分數有在99分以上
沒有人分數在100分以上

function callAry2(score) {
  let names = "";
  scoreAry.filter((item) => (item.score >= score ? (names += item.name) : ""));
  if (names !== "") {
    console.log(`${names}分數有在${score}分以上`);
  } else {
    console.log(`沒有人分數在${score}以上`);
  }
}

選出從零到指定數字範圍裡面的質數(,隔開並以str表示) join

// input 輸入
prime(13)
prime(30)
prime(24)
prime(44)

// output  請以字串來顯示
"2,3,5,7,11"
"2,3,5,7,11,13,17,19,23,29"
"2,3,5,7,11,13,17,19,23"
"2,3,5,7,11,13,17,19,23,29,31,37,41,43"

function isPrime(num) {
  if (num <= 1) {
    return false;
  }

  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) {
      return false;
    }
  }

  return true;
}

function prime(num) {
  let primes = [];
  for (let i = 2; i <= num; i++) {
    if (isPrime(i)) {
      primes.push(i);
    }
  }
  console.log(primes.join(","));
  return;
}